/*
 * @Author: hangzitong
 * @Date: 2023-06-10 09:50:52
 * @LastEditors: 杭梓桐
 * @LastEditTime: 2023-06-19 15:36:37
 */
import React, {
  ChangeEvent,
  useCallback,
  useEffect,
  useRef,
  useState,
} from 'react';
import './index.less';
import { Tag } from 'antd';
import MySelect from './Select';
type Props = {};

const phoneRexg =
  /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;

export default function Phone({}: Props) {
  const ref = useRef(null);
  const iptRef = useRef<HTMLInputElement>(null);
  const [phoneList, setPhoneList] = useState<Array<string>>([]);
  const [iptValue, setIptValue] = useState('');

  const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
    if (iptRef.current) {
      const inputWidth = iptRef.current.scrollWidth;
      const div = iptRef.current.parentNode as HTMLDivElement;
      div.style.width = `${inputWidth}px`;
    }
    const value = e.target.value;
    setIptValue(value);
    if (value.length === 3) {
      setPhoneList((list) => {
        return [...list, value];
      });

      setIptValue('');
    }
  };

  const handleMainOnclick = (e) => {
    console.log(e, 'e');
    if (iptRef.current) {
      iptRef.current.focus();
    }
  };

  const [width, setWidth] = useState<number>(200); // 初始化宽度为200px
  const [height, setHeight] = useState<number>(100); // 初始化高度为100px
  const [isDragging, setIsDragging] = useState<boolean>(false); // 是否正在进行拖拽
  const [startX, setStartX] = useState<number>(0);
  const [startY, setStartY] = useState<number>(0);
  const [prevClientX, setPrevClientX] = useState<number>(0);
  const resizableBoxRef = useRef<HTMLDivElement>(null);

  const handleMouseDown = useCallback((e: MouseEvent) => {
    console.log(e.clientX, 'mouseDown');
    setIsDragging(true);
    setStartX(e.clientX);
    setStartY(e.clientY);
    setPrevClientX(e.clientX);
    setWidth(parseInt(window.getComputedStyle(resizableBoxRef.current).width));
    setHeight(
      parseInt(window.getComputedStyle(resizableBoxRef.current).height),
    );
  }, []);

  const handleMouseMove = useCallback(
    (e: MouseEvent) => {
      if (!isDragging) return;
      const deltaX = e.clientX - prevClientX;
      setPrevClientX(e.clientX);
      const newWidth = e.clientX - startX + width;
      const newHeight = e.clientY - startY + height;
      console.log(newWidth, newHeight, 'new');
      if (startX + deltaX >= 0) {
        setWidth(newWidth);
      }
      setHeight(newHeight);
    },
    [startX, startY],
  );

  const handleMouseUp = useCallback(() => {
    console.log(isDragging, 'isDragging');
    if (!isDragging) return;
    if (resizableBoxRef.current) {
      console.log('up');
      resizableBoxRef.current.removeEventListener('mousedown', handleMouseDown);
    }
    document.documentElement.removeEventListener('mousemove', handleMouseMove);
    document.documentElement.removeEventListener('mouseup', handleMouseUp);
  }, [handleMouseMove, handleMouseDown, isDragging]);

  useEffect(() => {
    document.documentElement.addEventListener('mousemove', handleMouseMove);
    document.documentElement.addEventListener('mouseup', handleMouseUp);
  }, [handleMouseMove, handleMouseUp]);

  return (
    <div>
      <MySelect></MySelect>
      <div
        className="phone-main"
        ref={resizableBoxRef}
        style={{ width: `${width}px`, height: `${height}px` }}
        onClick={handleMainOnclick}
        onMouseDown={handleMouseDown}
      >
        <div className="phone-content">
          {phoneList.map((item) => (
            <Tag key={item} closable className="phone-tags">
              {item}
            </Tag>
          ))}
          <div className="input-box">
            <div className="input-box2">
              <input
                value={iptValue}
                ref={iptRef}
                type="text"
                className="phone-input"
                onInput={handleInput}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
